function createCanvas(width: number, height: number, devicePixelRatio: number = 1) {
    const canvas = document.createElement('canvas');
    canvas.width = width * devicePixelRatio;
    canvas.height = height * devicePixelRatio;
    canvas.textContent = 'Your browser is not support canvas';

    canvas.style.width = `${width}px`;
    canvas.style.height = `${height}px`;

    return canvas;
}

function getWebglRender(canvas: HTMLCanvasElement, attributes: WebGLContextAttributes) {
    const gl = canvas.getContext('webgl', attributes) ||
        canvas.getContext('experimental-webgl', attributes);
    if (!gl) {
        throw new Error('webgl is not support');
    }
    return <WebGLRenderingContext>gl;
}

function getContainerRange(rect: DOMRect) {
    const { width, height } = rect;
    return {
        width: width || 400,
        height: height || 300,
    };
}

export default {
    createCanvas,
    getWebglRender,
    getContainerRange,
};
